<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
			overflow: hidden;
			width: 100%;
			height: 100vh;
			padding: 0;
			margin: 0;
		}

		.bg {
			width: 100%;
			height: 100%;
			background: white;
			animation-name: bgShake;
			animation-duration: 5s;
			animation-iteration-count: infinite;
		}

		.heart {
			position: absolute;
			margin: auto;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: orange;
			height: 50px;
			width: 50px;
			transform: rotate(-45deg);
			animation-name: beat;
			animation-duration: 1s;
			animation-iteration-count: infinite;
		}

		.heart:after {
			background-color: orange;
			content: "";
			border-radius: 50%;
			position: absolute;
			width: 50px;
			height: 50px;
			top: 0px;
			left: 25px;
		}

		.heart:before {
			background-color: orange;
			content: "";
			border-radius: 50%;
			position: absolute;
			width: 50px;
			height: 50px;
			top: -25px;
			left: 0px;
		}

		@keyframes bgShake {
			50% {
				background: orange;
			}
		}

		@keyframes beat {
			0% {
				transform: scale(1) rotate(-45deg);
			}

			50% {
				transform: scale(0.6) rotate(-45deg);
			}
		}
	</style>

	<body>
		<div class="bg"></div>
		<div class="heart"></div>
	</body>
</html>
